<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background-color: rgb(142, 79, 12);
            position: absolute;
            left: 0;
            top: 0;
            display: flex;
            justify-content: center;
            align-items: center;
           border-radius: 20px 20px 20px 20px;
        }
    </style>
</head>

<body>
    <div id="box">
        <button id="btn">点击查看回放</button>
    </div>
</body>

</html>
<script>
    window.onload = function () {
        var positionArray = []; //定义一个位置数组
        var box = document.getElementById("box");
        box.onmousedown = function (evt) { //鼠标按下
            positionArray = [];
            var x = evt.offsetX;
            var y = evt.offsetY;
            document.onmousemove = function (evt) {

                box.style.left = evt.clientX - x + "px";
                box.style.top = evt.clientY - y + "px";
                console.log({ left: box.offsetLeft, top: box.offsetTop })
                positionArray.push({ left: box.offsetLeft, top: box.offsetTop });   //把获取到的位置插入位置数组中
            }
        }

        box.onmouseup = function () { //鼠标抬起
            document.onmousemove = null;
        }
        btn.onmousedown = function (evt) {
            evt.stopPropagation();
        }

        btn.onclick = function () {
            var index = positionArray.length - 1;
            var timer = setInterval(function () {
                if (index < 0) {
                    clearInterval(timer);
                    return;
                }
                box.style.left = positionArray[index--].left + "px";
                box.style.top = positionArray[index--].top + "px";
            }, 30);
        }
    }
</script>